[JavaScript] 非同步事件處理

前言

許久沒更新網誌了，開始上班剛好是個好時機重新經營。

最近又遇到非同步事件的問題，雖然寫過但一遇到還是卡住，因此紀錄一下做法。

問題

假設我們現在有三個事件要進行並取得結果

var tasks = [task1, task2, task3];

function task1(callback) {
  setTimeout(function(){
    console.log('task 1 done');
    callback(1);
  }, 500);
}
function task2(callback) {
  setTimeout(function(){
    console.log('task 2 done');
    callback(2);
  }, 400);
}
function task3(callback) {
  setTimeout(function(){
    console.log('task 3 done');
    callback(3);
  }, 300);
}

var obj = {} ;
function getResult(result){
	obj.result = result ;
}

依序執行

利用遞迴以及紀錄次數

function sequential(tasks,callback) {
	var index = 0 ;
	var resultList = [] ;
	(function next(){
		if ( index < tasks.length ){
			tasks[index++](function(el){
				resultList.push(el);
				next(tasks);
			});
		} else {
			callback(resultList);
		}
	})();
}

sequential(tasks,getResult);

同時進行

紀錄事件狀態及紀錄完成次數

function parallel(tasks , callback) {
	var resultList = [] , resultCount = 0 ;
	resultList.length = tasks.length ;
	for ( let i = 0 ; i < tasks.length ; i ++ ){
		tasks[i](function(el){
			resultList[i] = el ;
			resultCount ++ ;
			if ( resultCount >= tasks.length ){
				callback(resultList) ;
			}
		});
	} 
}

parallel(tasks,getResult);